<template>
  <div class="app">
    <ul class="menu">
      <li><router-link to="/foo?id=1&&price=200">Foo1</router-link></li>
      <li><router-link to="/foo?id=2&&price=500">Foo2</router-link></li>
      <li><router-link to="/foo?id=3&&price=300">Foo3</router-link></li>
      <li><router-link to="/bar/1">Bar1</router-link></li>
      <li><router-link to="/bar/2">Bar2</router-link></li>
      <li><router-link to="/bar/3">Bar3</router-link></li>
    </ul>
    <!-- 使用一标签 用来 切换显示 vue页面的 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},

  computed: {},

  components: {},
};
</script>

<style scoped lang=less>
.app {
  width: 100vw;
  height: 100vh;
  display: flex;
  .menu {
    width: 150px;
    padding: 5px;
    background-color: #9abdb3;
      list-style: none;
    li {
      margin: 15px 0;
        width: 100%;
      a {
        color: #707477;
        text-decoration: none;
        display: flex;
        align-items: center;
        text-align: center;
        /* padding-left: 20px; */
        justify-content: center;
      }
      /* 点击高亮  */
      /* .router-link-active {
        color: #a45c12;
        background-color: #b96e8c;
      } */
      .router-link-exact-active {
        color: #ffad34;
        background-color: #b96e8c;

      }
    }
  }
  .content {
    flex: 1;
    background-color: #a7cdaf;
  }
}
</style>